<template>
  <div class="categories">
    <BreadCrumb :item="['商品管理', '商品分类']"></BreadCrumb>
    <el-card>
      <el-button type="primary" @click="handleClass('add')">添加分类</el-button>
      <!-- 表格 -->
      <zk-table
        class="treeTable"
        :data="categoriesList"
        :columns="columns"
        :selection-type="false"
        :expand-type="false"
        show-index
        border
        :show-row-hover="false"
      >
        <!--是否有效-->
        <template slot="isok" slot-scope="scope">
          <i
            class="el-icon-success"
            v-if="scope.row.cat_deleted === false"
            style="color: lightgreen"
          ></i>
          <i class="el-icon-error" v-else style="color: lightgreen"></i>
        </template>
        <!--排序-->
        <template slot="order" slot-scope="scope">
          <el-tag size="mini" v-if="scope.row.cat_level === 0">一级</el-tag>
          <el-tag
            type="success"
            size="mini"
            v-else-if="scope.row.cat_level === 1"
            >二级</el-tag
          >
          <el-tag type="warning" size="mini" v-else>三级</el-tag>
        </template>
        <!--操作-->
        <template slot="opt" slot-scope="scope">
          <el-button
            type="primary"
            icon="el-icon-edit"
            size="mini"
            @click="handleClass('edit', scope.row.cat_id)"
            >编辑</el-button
          >
          <el-button
            type="danger"
            icon="el-icon-delete"
            size="mini"
            @click="removeCategories(scope.row.cat_id)"
            >删除</el-button
          >
        </template>
      </zk-table>
      <!-- 分页 -->
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pagenum"
        :page-sizes="[2, 5, 7, 10]"
        :page-size="pagesize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </el-card>
    <!-- 弹层 -->
    <el-dialog title="提示" :visible.sync="isHandleClass" @close="handleClose">
      <el-form ref="classForm" :model="form">
        <el-form-item label-width="80px" label="分类名称">
          <el-input v-model="form.className" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item
          label-width="80px"
          label="父级分类"
          v-show="genre === 'add'"
        >
          <!-- <el-input v-model="form.className" autocomplete="off"></el-input> -->
          <el-cascader
            v-model="value"
            :options="secondCategoriesList"
            :props="treeProps"
            @change="handleChange"
          >
          </el-cascader>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="subClass">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  addCategories,
  delCategories,
  editCategories,
  getCategories,
  getCategoriesDetail,
} from '@/api/categories'
export default {
  data() {
    return {
      genre: 'add',
      type: 3,
      value: [],
      treeProps: {
        label: 'cat_name',
        value: 'cat_id',
        children: 'children',
        expandTrigger: 'hover',
        checkStrictly: true,
      },
      pagenum: 1,
      pagesize: 2,
      total: 0,
      categoriesList: [],
      secondCategoriesList: [],
      isHandleClass: false,
      form: {
        className: '',
      },
      columns: [
        { label: '分类名称', prop: 'cat_name' },
        {
          label: '是否有效',
          //将当前列表页定义为模板页
          type: 'template',
          //当前这一列使用模板名称
          template: 'isok',
        },
        {
          label: '排序',
          //将当前列表页定义为模板页
          type: 'template',
          //当前这一列使用模板名称
          template: 'order',
        },
        {
          label: '操作',
          //将当前列表页定义为模板页
          type: 'template',
          //当前这一列使用模板名称
          template: 'opt',
        },
      ],
    }
  },
  methods: {
    async initCategories() {
      const res = await getCategories({
        type: 3,
        pagenum: this.pagenum,
        pagesize: this.pagesize,
      })
      console.log(res)
      this.categoriesList = res.data.result
      this.total = res.data.total
    },
    // 每页显示条数变化
    handleSizeChange(val) {
      this.pagesize = val
      this.initCategories()
    },
    // 当前页数发生变化
    handleCurrentChange(val) {
      this.pagenum = val
      this.initCategories()
    },
    // 操控弹层
    async handleClass(genre, id) {
      this.genre = genre
      if (genre === 'add') {
        // this.type = 2
        // 获取二级菜单
        const res = await getCategories({
          type: 2,
          pagenum: this.pagenum,
          pagesize: this.pagesize,
        })
        // console.log(res)
        this.secondCategoriesList = res.data.result
      }
      if (genre === 'edit') {
        const res = await getCategoriesDetail(id)
        // console.log(res)
        this.form.className = res.data.cat_name
        this.form.cid = id
      }

      this.isHandleClass = true
    },
    // 提交
    async subClass() {
      if (this.genre === 'add') {
        await addCategories({
          cat_level: this.value.length,
          cat_name: this.form.className,
          cat_pid: this.valueLastId,
        })
      }
      if (this.genre === 'edit') {
        await editCategories(this.form.cid, { cat_name: this.form.className })
      }
      this.initCategories()
      this.isHandleClass = false
    },
    // 删除分类
    async removeCategories(id) {
      this.$confirm('此操作将永久删除该用户, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(async () => {
          await delCategories(id)
          this.$message({
            type: 'success',
            message: '删除成功!',
          })
          this.initCategories()
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除',
          })
        })
    },
    // 数据回显
    handleChange(value) {
      this.value = value
    },
    handleClose() {
      this.form = {
        className: '',
      }
      this.$refs.classForm.resetFields()
    },
  },
  computed: {
    valueLastId() {
      return this.value[this.value.length - 1]
    },
  },
  created() {
    this.initCategories()
  },
}
</script>

<style lang="less" scoped>
.el-button {
  margin-bottom: 15px;
}
.el-pagination {
  margin-top: 15px;
}
.el-cascader {
  width: 100%;
}
</style>
